<template>
    <div class="home">
        <div class="left">
            <h2>禄鹿健康体检系统</h2>
            <div class="desc">
                <p>医疗健康&nbsp;&nbsp;模式创新</p>
                <p>汇集名医&nbsp;&nbsp;让诊疗更简单</p>
            </div>
            <div class="bottom">
                <div class="remark-container">
                    <div class="ball blue">1</div>
                    <div class="remark">先进的技术</div>
                </div>
                <div class="remark-container">
                    <div class="ball red">2</div>
                    <div class="remark">强大的团队</div>
                </div>
                <div class="remark-container">
                    <div class="ball green">3</div>
                    <div class="remark">丰富的经验</div>
                </div>
            </div>
        </div>
        <div class="right">
            <img :src="bannerImg" class="banner" alt="Banner" />
        </div>
    </div>
</template>

<script setup lang="ts">
// Import the banner image
import bannerImg from '../../assets/home/banner.png';
</script>

<style scoped>
.home {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    height: 100%;
}

.left {
    flex: 1;
    padding: 20px;
}

h2 {
    font-size: 32px;
    color: #333;
    margin-bottom: 20px;
}

.desc p {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
    margin: 10px 0;
}

.bottom {
    margin-top: 40px;
    display: flex;
    gap: 20px;
}

.remark-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ball {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}

.blue { background-color: #409EFF; }
.red { background-color: #F56C6C; }
.green { background-color: #67C23A; }

.remark {
    font-size: 16px;
    color: #555;
}

.right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner {
    max-width: 100%;
    height: auto;
}
</style>